<template>
  <TreeTableLayout>
    <template #tree>
      <Tree @query="doQuery" gatewayType="-1"></Tree>
    </template>
    <template #table>
      <RightTableLayout :slotName="['search', 'table', 'pagination']">
        <template #search>
          <Query :columns="columns" @query="doQuery"></Query>
        </template>
        <template #table>
          <el-table :empty-text="i18n.fy.nodata" :data="data.tableData" border v-loading="data.loading" :element-loading-text="i18n.fy.loading">
            <el-table-column prop="id" label="ID" width="80" align="center" />
            <el-table-column prop="userId" :label="i18n.language === 'zh-cn' ? '用户编号' : 'userId'" width="110" align="center" />
            <el-table-column prop="userName" :label="i18n.language === 'zh-cn' ? '用户名' : 'userName'" width="190" align="center"> </el-table-column>
            <el-table-column prop="operation" :label="i18n.language === 'zh-cn' ? '操作事项' : 'operation'" align="center" width="220" />
            <el-table-column prop="operationParameters" :label="i18n.language === 'zh-cn' ? '操作参数' : 'operationParameters'" align="center" />
            <el-table-column prop="operationValues" :label="i18n.language === 'zh-cn' ? '操作值' : 'operationValues'" width="220" :show-overflow-tooltip="true" />
            <el-table-column prop="createTime" :label="i18n.language === 'zh-cn' ? '操作时间' : 'createTime'" width="220"> </el-table-column>
          </el-table>
        </template>
        <template #pagination>
          <el-pagination @size-change="onChanSize" @current-change="onChanPage" v-model:current-page="data.queryForm.page" v-model:page-size="data.queryForm.limit" :total="data.total" />
        </template>
      </RightTableLayout>
    </template>
  </TreeTableLayout>
</template>

<script setup>
defineOptions({ name: "MailConfig" });
import Tree from "@/components/tree.vue";
import Query from "@/components/query.vue";
import RightTableLayout from "@/views/workbench/components/RightTableLayout.vue";
import TreeTableLayout from "@/views/workbench/components/TreeTableLayout.vue";
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

let columns = reactive({
  userName: {
    label: "userName",
    queryValue: "",
  },
  operation: {
    label: "operation",
    queryValue: "",
  },
  createTime: {
    type: "date",
    label: "createTime",
    queryValue: "",
  },
});

let data = reactive({
  queryForm: {
    page: 1,
    limit: 100,
  },
  tableData: [],
  total: 0,
  dialog: false,
  form: {},
  rules: {
    name: [{ required: true, message: "请输入姓名", trigger: "change" }],
    role: [{ required: true, message: "请选择岗位", trigger: "change" }],
  },
});

const onChanSize = (e) => {
  //修改分页数
  data.queryForm.page = 1;
  data.queryForm.limit = e;
  getList();
};
const onChanPage = (e) => {
  //修改分页
  data.queryForm.page = e;
  getList();
};

const getList = (params) => {
  // 获取表格数据
  data.loading = true;
  $axios
    .post("/userOperationLog/queryUserOperationLog", {
      ...data.queryForm,
      ...params,
      deviceFid: deviceFid.value,
    })
    .then((res) => {
      data.loading = false;
      data.tableData = res.data.data.records;
      data.total = res.data.data.total;
    });
};
let deviceFid = ref();

const doQuery = (params) => {
  if (params.deviceFid) {
    deviceFid.value = params.deviceFid;
  }
  getList({ ...params, deviceFid: deviceFid.value });
};

onBeforeMount(() => {
  getList({});
});
</script>

<style lang="scss" scoped>
.available1 {
  color: orangered;
}
</style>
